@charset "UTF-8";
//-----------------------------------------------------	
// slide scss
//-----------------------------------------------------


// slideInDown
@mixin animate-slideInDown () {
  @include keyframes(slideInDown){
    0% {
      opacity: 0;
      @include translateY(-2000px);
    }
    100% {
      @include translateY(0);
    }
  }
  .slideInDown {
    @include animation-name(slideInDown);
    @extend %animated;
  }
}

// slideInLeft
@mixin animate-slideInLeft () {
  @include keyframes(slideInLeft){
    0% {
      opacity: 0;
      @include translateX(-2000px);
    }
    100% {
      @include translateX(0);
    }
  }
  .slideInLeft {
    @include animation-name(slideInLeft);
    @extend %animated;
  }
}

// slideInRight
@mixin animate-slideInRight () {
  @include keyframes(slideInRight){
    0% {
      opacity: 0;
      @include translateX(2000px);
    }
    100% {
      @include translateX(0);
    }
  }
  .slideInRight {
    @include animation-name(slideInRight);
    @extend %animated;
  }
}

// slideOutLeft
@mixin animate-slideOutLeft () {
  @include keyframes(slideOutLeft){
    0% {
      @include translateX(0);
    }
    100% {
      opacity: 0;
      @include translateX(-2000px);
    }
  }
  .slideOutLeft {
    @include animation-name(slideOutLeft);
    @extend %animated;
  }
}

// slideOutRight
@mixin animate-slideOutRight () {
  @include keyframes(slideOutRight){
    0% {
      @include translateX(0);
    }
    100% {
      opacity: 0;
      @include translateX(2000px);
    }
  }
  .slideOutRight {
    @include animation-name(slideOutRight);
    @extend %animated;
  }
}

// slideOutUp
@mixin animate-slideOutUp () {
  @include keyframes(slideOutUp){
    0% {
      @include translateY(0);
    }
    100% {
      opacity: 0;
      @include translateY(-2000px);
    }
  }
  .slideOutUp {
    @include animation-name(slideOutUp);
    @extend %animated;
  }
}